<template>
  <div class="home">
    <!-- mpvue不支持 transition 过渡动画 -->
    <!-- <transition name="sellerInfo"> -->
    <div class="sellerInfo" v-if="isSellerInfo">
      <sellerInfo :sellerData="seller"  @emit-reviseIsSellerInfo="isSellerInfo = !isSellerInfo"></sellerInfo>
    </div>
    <!-- </transition> -->
    <!-- ele头部 -->
    <div class="header">
      <!-- 背景模糊 -->
      <div class="bg">
        <img :src="seller.avatar" width="100%">
      </div>
      <div class="content">
        <div class="avatar">
          <img :src="seller.avatar" alt="">
        </div>
        <div class="rightBox">
          <div class="title">
            <img class="icon" src="../../../static/images/brand@3x.png" alt="">
            <span class="name">{{seller.name}}</span>
          </div>
          <div class="des">
            <span>{{seller.description}} / {{seller.deliveryTime}}分钟送达</span>
          </div>
          <!-- 优惠信息 -->
          <div class="supportsBox" v-if="seller.supports && seller.supports.length">
            <!-- 动画效果 -->
            <div class="supports">
              <!-- <transition-group name="fade"> -->
                <div class="item" v-for="(item, index) in seller.supports" :key="index" v-show="currentIndex === index">
                  <span class="icon" :class="classMap[item.type]"></span>
                  <span class="tt">{{item.description}}</span>
                </div>
              <!-- </transition-group> -->
            </div>
            <!-- 字体图标 -->
            <div class="supportsNum" @click="showFn()">{{seller.supports.length}}个<i class="icon icon-keyboard_arrow_right"></i></div>
          </div>
        </div>
      </div>
      <!-- 商家公告 -->
      <div class="bulletin" @click="showFn()">
        <span class="bulletinIcon"></span>
        <span class="tt">{{seller.bulletin}}</span>
        <i class="icon icon-keyboard_arrow_right"></i>
      </div>
    </div>
    <!-- 导航 -->
    <div class="navBox">
      <div class="nav">
        <div class="item">
          <span class="title" :class="{active: currentIx === 0}" @click="changeCurrentIxFn($event, 0)">商品</span>
        </div>
        <div class="item">
          <span class="title" :class="{active: currentIx === 1}" @click="changeCurrentIxFn($event, 1)">评价</span>
        </div>
        <div class="item">
          <span class="title" :class="{active: currentIx === 2}" @click="changeCurrentIxFn($event, 2)">商家</span>
        </div>
      </div>
      <!-- <div class="navbg" :style="{left: navBgOffLeft + 'rpx'}"></div> -->
    </div>
    <!-- 导航对应的内容 轮播图 -->
    <!-- @transition="bindtransitionFn" @animationfinish="bindanimationfinishFn" -->
    <!-- swiper（tab）高度自适应 {height: clientHeight ? clientHeight + 'px' : 'auto'} -->
    <swiper :style="{height: clientHeight ? clientHeight - headerHeight - navBoxHeight + 'px' : 'auto'}" :current="currentIx" @change="bindchangeFn($event)" @transition="bindtransitionFn($event)">
      <swiper-item>
        <!-- 商品组件 -->
        <scroll-view>
          <goods></goods>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <!-- 评价组件 -->
        <scroll-view scroll-y="true" :style="{height: clientHeight ? clientHeight - headerHeight - navBoxHeight + 'px': 'auto'}">
          <rating :sellerData="seller"></rating>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <!-- 商家 -->
        <!-- swiper（tab）高度自适应 -->
        <scroll-view scroll-y="true" :style="{height: clientHeight ? clientHeight - headerHeight - navBoxHeight + 'px': 'auto'}">
          <seller :sellerData="seller"></seller>
        </scroll-view>
      </swiper-item>
    </swiper>
    <!-- 购物车组件 -->
    <shoppingCart></shoppingCart>
  </div>
</template>

<script>
  import sellerInfo from '../../components/sellerInfo.vue' // 引入商家信息弹窗组件
  import seller from '../../components/seller.vue' // 引入商家组件
  import rating from '../../components/ratings' // 引入评论组件
  import goods from '../goods/index' // 引入商品组件
  import shoppingCart from '../../components/shoppingCart' // 引入购物车组件
  // import { mapState, mapMutations } from 'vuex'
  export default {
    // onLoad () {
    //   // console.log(this.$store.state)
    // },
    data() {
      return {
        seller: [], // /api/seller 商品的数据
        classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special'], // 优惠图标类名
        currentIndex: 0, // 轮播优惠信息
        isSellerInfo: false,
        currentIx: 0, // 轮播图 当前所在滑块的 index
        clientHeight: 0, // <!-- swiper（tab）高度自适应 -->
        navBgOffLeft: 98,
        headerHeight: 0,
        navBoxHeight: 0
      }
    },
    watch: {
      seller() {
        setTimeout(() => {
          // console.log('11111111')
          this.getHeight()
        }, 60)
      }
    },
    // beforeUpdate() {
    //   this.buyFoodsData1 = this.$store.state.buyFoodsData
    //   console.log('buyFoodsData', this.buyFoodsData1)
    // },
    // computed: mapState(['isShowSellerInfo', 'show']),
    components: { // 注册子组件
      sellerInfo,
      seller,
      rating,
      goods,
      shoppingCart
    },
    mounted() {
      let that = this
      // 在js中获取设备可视窗口高度 <!-- swiper（tab）高度自适应 -->
      wx.getSystemInfo({
        success (res) {
          // console.log('windowHeight', res.windowHeight)
          that.clientHeight = res.windowHeight
        }
      })
      // 请求商家数据
      wx.request({
        url: 'http://localhost:8080/api/seller',
        success (res) {
          if (res.data.errno === 0) {
            that.seller = res.data.data
          }
          // console.log(res.data)
        }
      })
      this.$nextTick(() => { // 所有组件渲染完成后
        // console.log(this.isShowSellerInfo)
        setInterval(() => { // 定时器改变 轮播优惠信息
          this.currentIndex++
          if (this.currentIndex >= this.seller.supports.length) {
            this.currentIndex = 0
          }
        }, 1000)
      })
    },
    methods: {
      // ...mapMutations({closeFn: 'SHOW_SELLERINFO'}),
      // 显示商家信息弹窗
      showFn() {
        // console.log('true', this.isShowSellerInfo, this.$store.state.isShowSellerInfo, this.show)
        // this.closeFn(true)
        this.isSellerInfo = !this.isSellerInfo
        // console.log(this.isSellerInfo)
      },
      bindchangeFn(e) { // 页面滑动完成触发
        // console.dir(e)
        this.currentIx = e.target.current
      },
      bindtransitionFn(e) { // 只有滑动了就触发
        // console.log(e)
      },
      changeCurrentIxFn(e, index) { // 修改滑动的索引
        this.currentIx = index
        // console.log(e, e.target.offsetLeft)
        this.navBgOffLeft = e.target.offsetLeft * 2
      },
      getHeight() {
        var query = wx.createSelectorQuery()
        // 食物容器的盒子的高度
        query.select('.header').boundingClientRect((rect) => {
          this.headerHeight = rect.height
          console.log(rect)
        })
        // 每个菜单名所在盒子的高度
        query.select('.navBox').boundingClientRect((rect) => {
          this.navBoxHeight = rect.height
          console.log(rect)
        }).exec()
      }
    }
  }
</script>

<style lang="sass" scope>
.home
  width: 750rpx
  height: 100%
  .sellerInfo
    width: 750rpx
    height: 100%
    // transition: all 0.5s
    // transform: translateX(100%)
    animation: fade 0.5s
  @keyframes fade
    from
      opacity: 0
    to
      opacity: 1
  .header
    position: relative
    width: 100%
    height: 268rpx
    background: rgba(7, 17, 27, 0.5)
    overflow: hidden
    .bg
      position: absolute
      left: 0
      right: 0
      top: 0
      bottom: 0
      text-align: center
      filter: blur(10rpx)
      z-index: -1
      img
        width: 100%
        // transform: translateY(-100rpx)
    .content
      display: flex
      .avatar
        flex: 0 0 208rpx
        img
          margin: 48rpx 32rpx 36rpx 48rpx
          width: 128rpx
          height: 128rpx
          border-radius: 4rpx
      .rightBox
        flex: 1
        .title
          margin-top: 52rpx
          font-size: 0
          .icon
            margin-right: 12rpx
            width: 60rpx
            height: 36rpx
          .name
            vertical-align: top
            line-height: 36rpx
            font-size: 32rpx
            font-weight: bold
            color: rgba(255, 255, 255, 1)
        .des
          margin: 16rpx 0 16rpx 0
          font-size: 24rpx
          font-weight: 200
          line-height: 24rpx
          color: rgb(255, 255, 255)
        .supportsBox
          width: 100%
          height: 24rpx
          position: relative
          .supports
            position: relative
            font-size: 0
            overflow: hidden
            height: 24rpx
            .item
              position: absolute
              margin-bottom: 4rpx
              overflow: hidden
              animation: run 0.3s
              @keyframes run
                from
                  transform: translateY(100%)
                to
                  transform: translateY(-100%)
              .icon
                display: inline-block
                margin-right: 8rpx
                width: 24rpx
                height: 24rpx
                &.decrease
                  background: url('../../../static/images/decrease_1@3x.png') no-repeat
                  background-size: 100% auto
                &.discount
                  background: url('../../../static/images/discount_1@3x.png') no-repeat
                  background-size: 100% auto
                &.guarantee
                  background: url('../../../static/images/guarantee_1@3x.png') no-repeat
                  background-size: 100% auto
                &.invoice
                  background: url('../../../static/images/invoice_1@3x.png') no-repeat
                  background-size: 100% auto
                &.special
                  background: url('../../../static/images/special_1@3x.png') no-repeat
                  background-size: 100% auto
              .tt
                vertical-align: top
                font-size: 20rpx
                font-weight: 200
                line-height: 24rpx
                color: rgb(255, 255, 255)
          .supportsNum
            position: absolute
            right: 24rpx
            top: -50%
            // transform: translateY(50%)
            padding: 14rpx 16rpx
            font-size: 20rpx
            font-weight: 200
            line-height: 24rpx
            border-radius: 24rpx
            color: rgb(255, 255, 255)
            background-color: rgba(0, 0, 0, 0.2)
            .icon
              display: inline-block
              vertical-align: middle
              font-size: 20rpx
    .bulletin
      box-sizing: border-box
      display: flex
      padding: 0 24rpx
      width: 750rpx
      height: 56rpx
      font-size: 0
      background-color: rgba(7, 17, 27, 0.2)
      .bulletinIcon
        flex: 0 0 40rpx
        margin-top: 16rpx
        width: 40rpx
        height: 24rpx
        background: url('../../../static/images/bulletin@3x.png') no-repeat
        background-size: 40rpx auto
      .tt
        flex: 0 1 auto
        margin: 0 8rpx
        font-size: 20rpx
        font-weight: 200
        line-height: 56rpx
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis
        color: #fff
      .icon
        flex: 0 0 24rpx
        margin-top: 16rpx
        font-size: 24rpx
        color: #fff
        vertical-align: bottom
  .navBox
    position: relative
    .nav
      display: flex
      width: 750rpx
      height: 80rpx
      line-height: 80rpx
      text-align: center
      border-bottom: 1rpx solid rgba(7, 17, 27, 0.1)
      .item
        flex: 1
        .title
          display: inline-block
          height: 80rpx
          font-size: 28rpx
          color: rgba(77, 85, 93, 1)
          // transition: all .5s
          &.active
            color: rgba(240, 20, 20, 1)
            transform: translateY(-1rpx)
            // border-bottom: 1rpx solid rgba(240, 20, 20, 1)
    .navbg
      position: absolute
      left: 49rpx
      bottom: 0
      width: 60rpx
      height: 1rpx
      background-color: rgba(240, 20, 20, 1)
      transition: all 0.5s
</style>
